<template>
  <div>我是子组件</div>
  <div>消息{{data.msg}}</div>
  <div>姓名{{info.name}}</div>
  <div>年龄{{info.age}}</div>
  <div>性别：{{info.sex}}</div>
  <div>{{demo}}</div>
  <button @click="changeAge">点击显示</button>
  <button @click="changeLike">点击修改性别</button>
  <slot></slot>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
export default defineComponent({
    props:{
        demo:{
            type:String,
            required:true,
        }
    },
    emits:['say'],
    setup(props,context) {
        console.log(props,context);
        const data = reactive({
            msg:'苏祥'
        })
        const info = reactive({
            age:18,
            name:'苏祥',
            sex:'男',
            like:{
                a:{
                    b:2
                },
            }
        })
        const changeAge = ()=>{
            info.age = 20;
            data.msg = "苏祥牛逼6666";
            context.emit('say','苏祥')
        }
        const changeLike = ()=>{
            info.like.a.b = 666
        }
        watch(()=>info.like,(newVal,oldVal)=>{
            console.log('info.like变化了',newVal,oldVal);
        },{deep:true})
        return {
            data,
            info,
            changeAge,
            changeLike,
        }
    },
})
</script>
